<template>
  <div>
      <el-row :gutter="24" style="background-color: #F2F6FC; margin-top:20px;">
        <el-col :span="2" style="margin-top:20px;text-align:center;">
          <span>当前报警:{{totalNumAttr}}</span>
        </el-col>
        <el-col :span="2" style="margin-top:20px; text-align:center;">
          <el-button size="mini" @click="AllConfirmed()" type="danger">全部确认</el-button>
        </el-col>
        <el-col :span="16" style="margin-top:20px;text-align:left;">
              <!-- 搜索框 -->
              <el-form  :model="qParamAttr" ref="qParamAttr" label-width="100px" :inline="true" size="mini">
                      <el-form-item label="所属科室" prop="AlarmType3" style="width: 220px;">
                        <el-select style="width:120px;" v-model="qParamAttr.AlarmType3" placeholder="选择" @change="open()">
                          <template v-for="item in LXData3">
                            <el-option :key="item.LX" :label="item.LX" :value="item.LX">
                              <span style="float: left">{{item.LX}}</span>
                            </el-option>
                          </template>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="监控设备" prop="AlarmType2" style="width: 220px;">
                        <el-select style="width:120px;" v-model="qParamAttr.AlarmType2" placeholder="选择" @change="open()">
                          <template v-for="item in LXData2">
                            <el-option :key="item.LX" :label="item.LX" :value="item.LX">
                              <span style="float: left">{{item.LX}}</span>
                            </el-option>
                          </template>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="采集器状态" prop="AlarmType" style="width: 220px;">
                        <el-select style="width:120px;" v-model="qParamAttr.AlarmType1" placeholder="选择" @change="open()">
                          <template v-for="item in LXData1">
                            <el-option :key="item.LX" :label="item.LX" :value="item.LX">
                              <span style="float: left">{{item.LX}}</span>
                            </el-option>
                          </template>
                        </el-select>
                      </el-form-item>
              </el-form>
        </el-col>
      </el-row>
    
    <!-- 卡片视图 -->
    <el-card>
      <div>
        <!-- 列表  -->
        <el-table :data="tableData" border stripe size="mini">
          <el-table-column type="index"></el-table-column>
          <el-table-column label="采集器名称" prop="CJQMC"></el-table-column>
          <el-table-column label="采集器ID" prop="CJQID"></el-table-column>
          <el-table-column label="采集器状态" prop="CJQZT"></el-table-column>
          <el-table-column label="当前温度值" prop="CJWDZ"></el-table-column>
          <el-table-column label="温度上限值" prop="WDSXZ"></el-table-column>
          <el-table-column label="温度下限值" prop="WDXXZ"></el-table-column>
          <el-table-column label="当前湿度值" prop="CJSDZ"></el-table-column>
          <el-table-column label="湿度上限值" prop="SDSXZ"></el-table-column>
          <el-table-column label="湿度下限值" prop="SDXXZ"></el-table-column>
          <el-table-column label="采集器所属单位" prop="DWMC"></el-table-column>
          <el-table-column label="异常时间节点" prop="YCSJTSSJ"></el-table-column>
          <el-table-column label="操作" width="168px">
            <template slot-scope="scope">
              <!-- 确认报警 -->
                <el-button type="success" plain size="mini" style="float:right" 
                  @click="ConfirmAlarm(scope.row.CJQID)">确认报警
                </el-button> 
                <el-button type="primary" plain size="mini" style="float:right" 
                  @click="$router.push({path: '/TemperatureAndHumidity/Detailed', query:{ID : tableData.CJQBH}})">详情
                </el-button> 
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],//查询数据对象
      totalNumAttr:'',//总数量
      qParamAttr:{//查询参数
        AlarmType1:'',
        AlarmType2:'',
        AlarmType3:'',
      },
      LXData1:'',//采集器状态
      LXData2:'',//监控设备
      LXData3:'',//所属科室
    };
  },
  created() {
    var me = this;

    this.Refresh();

    // 采集器状态
    me.getRequest("/static/json/ypmslx.json",{}).then(resp=>{
      if(resp.status == 200) {
        this.LXData1 = resp.data;
      }
    });
    // 监控设备
    me.getRequest("/static/json/ypmslx.json",{}).then(resp=>{
      if(resp.status == 200) {
        this.LXData2 = resp.data;
      }
    });
    // 所属科室
    me.getRequest("/static/json/ypmslx.json",{}).then(resp=>{
      if(resp.status == 200) {
        this.LXData3 = resp.data;
      }
    });

  },
  methods: {
    open() {
        // this.$message('改变');
        this.Refresh();//查询一遍
      },
    //刷新页面
    Refresh() {
      var me = this;
      let url = "/static/data/Monitoring.json";// /jcJsxxb Monitoring
      if(url !== "") {
        me.getRequest(url, this.qParamAttr).then(resp => {
            if(resp.status == 200) {
              this.tableData = resp.data.data;
              this.totalNumAttr = resp.data.data.length;
            }
        });
      }
    },
    //确认报警
    ConfirmAlarm(id){
      var me = this;
      let url = "jcJsxxb";// /jcJsxxb
      if(url !== "") {
        me.postRequest(url, id).then(resp => {
            if(resp.status == 200) {
              this.Refresh();
            }
        });
      }
    },
    //全部确认
    AllConfirmed(){
      var me = this;
      let url = "jcJsxxb";// /jcJsxxb
      if(url !== "") {
        me.postRequest(url).then(resp => {
            if(resp.status == 200) {
              this.Refresh();
            }
        });
      }
    }
  }
};
</script>

<style>
</style>
